<template>
 <div class="tradPage" >
     <div class="tardtitle">协议签署</div>
    <div class="tradcont">
        <div class="tradleft">
           <div class="tradscr">
               <img v-if="imageUrl" :src="imageUrl" class="avatar" :style="{backgroundImage:'url('+imageUrl+')'}" @mousedown='signPic'>
               <el-button type="danger">认证电子签章</el-button>
           </div>
        </div>
        <div class="tradright" id="singbac">
            <div class="pdf-container" style="height:100%">
                
            <el-carousel height="100%"  :autoplay="false" arrow="always" @change="swiperChange" >
                 <el-carousel-item v-for="item in totalPage" :key="item" style="height:100%" :class='"swiper-item"+item' :id='"swiperItem"+item'>
                   <canvas  :id='"the-canvas" + item'></canvas>
                 </el-carousel-item>    
            </el-carousel>
            </div>

        </div>

    </div>  

   <div class="tradfooter">
       <el-button type="danger" @click="makePdf">提交签署</el-button>
       <el-button >重置签署</el-button>
   </div>
    
 </div>


</template>
<script>
import * as  pdfjsLib from 'pdfjs-dist'
  import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
  import htmlToPdf from '@/utils/htmlpdf';
  //import html2canvas from 'html2canvas';
  //import JsPDF from 'jspdf';
export default {
     data(){
        return{
            url:"http://119.97.184.132:8080/profile/upload/2020/08/29/f9374060-a479-4b76-9817-9bfe06d3526b.pdf",
            imageUrl:"http://119.97.184.132:8080/profile/upload/2020/08/29/58f19557-d7dc-4816-92b7-3c35b1d0636d.png",
            totalPage:0,
            scrollTop:0,
            swipePage:1,
        }
    },
    created(){
         pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
          this.loadFile(this.url);

    },
    methods:{
        swiperChange(e){
             console.log(e);
             this.swipePage=e+1;
            },
        signPic(e){
          let dom = e.currentTarget.cloneNode(true);
          document.querySelector('#singbac').appendChild(dom);//将拖动的图片放在这个里面
          document.onmousemove = e => { //拖动
          dom.style.left = (this.getPos(e).x - parseInt(dom.clientWidth / 2) - 10) + 'px';
          dom.style.top = (this.getPos(e).y - parseInt(dom.clientHeight / 2) + this.scrollTop - 10) + 'px';
          dom.className="sign-img mark";
          }
          document.onmouseup = e => { //松开
          console.log(this.getPos(e).x);
           dom.style.left = this.getPos(e).x - '460'+"px";
           dom.style.top = (this.getPos(e).y + 80 - parseInt(dom.clientHeight / 2) - 105) + 'px';
           document.querySelector('#singbac').removeChild(dom);
           document.querySelector('.swiper-item'+this.swipePage).appendChild(dom);//加入到当面可视区哉
           document.onmousemove = null;
           document.onmouseup = null;
           dom.onmousedown = this.moveTo;
          
           dom.onclick = this.deleteIt;
          }
        },
        moveTo(e) {
         let odiv = e.currentTarget;
         let disX = e.clientX - odiv.offsetLeft;
         let disY = e.clientY - odiv.offsetTop;
         document.onmousemove = e => {
             if (left <= 0) {
          left = 0;
        } else if (left >= document.querySelector('.swiper-item'+this.swipePage).clientWidth - odiv.clientWidth) {
          left = document.querySelector('.swiper-item'+this.swipePage).clientWidth - odiv.clientWidth;
        } else {
          left = left - 10
        }
 
        if (top <= 0) {
          top = 0;
        } else if (top >= document.querySelector('.swiper-item'+this.swipePage).clientHeight - odiv.clientWidth) {
          top = document.querySelector('.swiper-item'+this.swipePage).clientHeight - odiv.clientWidth;
        } else {
          top = top - 10
        }
        //移动当前元素
        odiv.style.left = left + "px";
        odiv.style.top = top + "px";
         }
         document.onmouseup = e => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
        },
      
    deleteIt(e) {
        
      document.querySelector('.swiper-item'+this.swipePage).removeChild(e.currentTarget.parentNode);
    },
          makePdf(){
              
           //html2canvas(document.querySelector('#swiperItem'+this.swipePage)).then((canvas )=>{
            // let imgUrl = canvas.toDataURL("image/png");
            // console.log(imgUrl);
           //})
        //    let alldiv = document.createElement("div");
        //    alldiv.id="createDiv";
        //    let childSwipt=document.querySelector('#swiperItem'+this.swipePage);
        //    console.log(childSwipt.offsetHeight);
          
        //    alldiv.style.width=childSwipt.offsetWidth+"px";
        //    alldiv.style.height=childSwipt.offsetHeight*this.totalPage+"px";//这里总的高度
           
        //    for (var i=0;i<this.totalPage;i++){
                  
        //           var s = i+1;
        //           alldiv.appendChild(document.querySelector('#swiperItem'+s));
        //   }
        //    document.body.append(alldiv);
        //    var canvas = document.createElement("canvas");
        //     canvas.width = childSwipt.offsetWidth*2;    // 将画布宽&&高放大两倍
        //     canvas.height = childSwipt.offsetHeight*this.totalPage*2;
            
            
        //     var context = canvas.getContext("2d");
        //     context.scale(2, 2);
        //    html2canvas(alldiv, { dpi: 300,useCORS:true }).then((canvas)=>{
        //      var contentWidth = canvas.width;
        // var contentHeight = canvas.height;
        // //一页pdf显示html页面生成的canvas高度;
        // var pageHeight = contentWidth / 592.28 * 841.89;
        // //未生成pdf的html页面高度
        // var leftHeight = contentHeight;
        // //页面偏移
        // var position = 0;
        // //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        // var imgWidth = 595.28;
        // var imgHeight = 595.28/contentWidth * contentHeight;

        // var pageData = canvas.toDataURL('image/jpeg', 1.0);
       
        // var pdf = new JsPDF('', 'pt', 'a4');
        // if (leftHeight < pageHeight) {
        //     //在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
        //     pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
        //     // pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
        // } else {    // 分页
        //     while(leftHeight > 0) {
        //         pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
        //         leftHeight -= pageHeight;
        //         position -= 841.89;
        //         //避免添加空白页
        //         if(leftHeight > 0) {
        //             pdf.addPage();
        //         }
        //     }
        //     console.log(pdf.output("datauristring"));
        //     pdf.save("wodrdaa.pdf");
        // }
        //    })
        console.log(this.totalPage);
        let images =[];
           for(var i=0;i<this.totalPage;i++){
               console.log(i);
               let s = i+1;
              // setTimeout({
               let image = htmlToPdf.downloadPDF( document.querySelector('#swiperItem'+s),'123456');
              // },200);
              
             images.push(image);
         }
         console.log(images[3]);
             
           
          

         
          },
        loadFile (url) {
                 
                  let loadingTask = pdfjsLib.getDocument(url);
                  loadingTask.promise.then((pdf) => {
                   console.log(pdf);
                  let pageNum = pdf.numPages
                  this.totalPage = pageNum;
               for (let i = 1; i <= pageNum; i++) {
            pdf.getPage(i).then((page) => {
             let viewport = page.getViewport({ scale: 0.8, });
          let scaledViewport = page.getViewport({ scale: 0.8, })
          let canvas = document.getElementById('the-canvas' + i)
          let context = canvas.getContext('2d')
          let CSS_UNITS = 96.0 / 72.0
          canvas.height = scaledViewport.height * CSS_UNITS
          canvas.width = scaledViewport.width * CSS_UNITS
          
          let renderContext = {
            transform: [CSS_UNITS,0,0,CSS_UNITS,0,0],
            canvasContext: context,
            viewport: scaledViewport
          }
          let renderTask = page.render(renderContext)
          renderTask.promise.then(() => {
          })
        })
      }
    }, function (reason) {
      console.error(reason)
    })
     
    },
    getPos(ev) {
         return {x: ev.clientX, y: ev.clientY};
        },
    }

}
</script>
<style>
.tradPage{
   position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f7f7f7;
}
.tradfooter{
    position: fixed;
    height: 80px;
    bottom: 0;
    background: #fff;
    width: 100%;
    text-align: center;
    line-height: 80px;
}
.tradcont{
    position: fixed;
    height: calc(100% - 170px);
    width: 100%;
    top: 70px;
   display: flex;
}
.tardtitle{
  width: 100%;
  position: fixed;
  top: 0;
  height: 50px;
  background: #ffffff;
  line-height: 50px;
  font-size: 20px;
   border-bottom: #dddddd solid 1px;
  text-indent: 20px;
  /* box-shadow: 0 0 4px 2px #f2e8e7; */
}
.tradleft{
    width: 20%;
    float: left;
    height: 100%;
    background: #fff;
    margin-left: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
}
.tradright{
    flex:1;
    margin: 0px 20px;
    background: rgba(0,0,0, 0.2) ;
    text-align: center;
}
.el-carousel {
  height: calc(100% - 20px);
  margin: 10px 0;
}
.tradscr{
    width: 150px;
    height: 150px;
    margin-top: 20px;
}

.sign-img{
  position: absolute;
  z-index: 9999999999999999;
}
.pdf-container{
  position: relative;
}
</style>